import coverImg from '@/assets/coverImg.webp';
import lf from '@/assets/lf.jpg';
import { PageCard } from '@/page-components';
import { List } from 'antd';
import { useEffect, useState } from 'react';
// import { ColumnsPhotoAlbum } from 'react-photo-album';
// import 'react-photo-album/columns.css';
import Lightbox from 'yet-another-react-lightbox';
import Captions from 'yet-another-react-lightbox/plugins/captions';
import Counter from 'yet-another-react-lightbox/plugins/counter';
import 'yet-another-react-lightbox/plugins/counter.css';
import Download from 'yet-another-react-lightbox/plugins/download';
import Fullscreen from 'yet-another-react-lightbox/plugins/fullscreen';
import Slideshow from 'yet-another-react-lightbox/plugins/slideshow';
import Video from 'yet-another-react-lightbox/plugins/video';
import Zoom from 'yet-another-react-lightbox/plugins/zoom';
import 'yet-another-react-lightbox/styles.css';
import styles from './index.less';

const Index = () => {
  const imgWdith = '150px';
  const url = lf;
  const [open, setOpen] = useState(false);
  const [imgList, setImgList] = useState([]);
  const [listVisible, setListVisible] = useState(false);
  const closeImgList = () => {
    setOpen(false);
    setImgList([]);
  };
  const CardList = (props: any) => {
    const data = [
      {
        title: '点点滴滴',
        src: coverImg,
        content: '💖记录你我生活',
        children: [url, url, url],
      },
      {
        title: '爱情清单',
        src: coverImg,
        content: '🗃️甜蜜瞬间有你陪伴',
        children: [url, url, url],
      },
      {
        title: '时光相册',
        src: coverImg,
        content: '🖼️记录你我生活',
        children: [url, url, url],
      },
    ] as any;
    const [list, setList] = useState<any[]>([]);
    const [loading, setLoading] = useState(false);
    const getList = () => {
      setLoading(true);
      return new Promise((reslove, reject) => {
        setTimeout(() => {
          setList([...data, ...data]);
          reslove(data);
          setLoading(false);
        }, 300);
      });
    };

    useEffect(() => {
      getList();
    }, []);
    const CardItem = ({ item }: any) => {
      return (
        <div
          className={styles?.cardItemBox}
          onClick={() => {
            console.log(setImgList, item.children);

            setImgList(
              item?.children?.map((el: any) => {
                return {
                  src: el,
                  width: imgWdith,
                  height: '300px',
                };
              }),
            );
            setOpen(true);
          }}
        >
          <img src={item?.src} alt="" className={styles?.imgItem} />
          <p className={styles.title}>{item?.title}</p>
          <div className={styles.mask}></div>
        </div>
      );
    };
    return (
      <div
        style={{
          // width: '100%',
          // display: 'flex',
          // justifyContent: 'center',
          marginTop: '20px',
          padding: '0  20px',
          transition: 'all 0.3s ease-in-out',
        }}
        {...props}
      >
        <List
          grid={{
            gutter: 1,
            column: 3,
            xs: 1,
            sm: 2,
            md: 3,
            lg: 3,
            xl: 3,
            xxl: 3,
          }}
          style={{
            gap: 0,
          }}
          loading={loading}
          dataSource={[...list]}
          renderItem={(item: any) => (
            <List.Item style={{ display: 'flex', justifyContent: 'center' }}>
              <CardItem item={item}></CardItem>
            </List.Item>
          )}
        />
      </div>
    );
  };

  return (
    <div className={styles?.container}>
      <PageCard
        dateTextProps={{
          title: '愿时光不老,原爱情长存,我们的记忆永不褪色' + '❤️',
          content: true,
        }}
      >
        {/* <Lightbox
        open={advancedExampleOpen}
        close={() => setAdvancedExampleOpen(false)}
        slides={advancedSlides}
        plugins={[Captions, Fullscreen, Slideshow, Thumbnails, Video, Zoom]}
      /> */}
        <div className={styles?.imgContainer}>
          {!open && <CardList></CardList>}
          {/* {listVisible && (
            <ColumnsPhotoAlbum
              photos={imgList}
              // on click callback
              onClick={({ event, photo }) => {
                // let a link open in a new tab / new window / download
                if (event.shiftKey || event.altKey || event.metaKey) return;

                // prevent the default link behavior
                event.preventDefault();
                setOpen(true);
              }}
            />
          )} */}
        </div>
        <Lightbox
          open={open}
          close={() => closeImgList()}
          slides={imgList}
          plugins={[
            Captions,
            Fullscreen,
            Slideshow,
            Video,
            Counter,
            Zoom,
            Download,
          ]}
        />
      </PageCard>
    </div>
  );
};
export default Index;
